<script setup lang="ts">
import { ref, reactive } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { apiGradeList, getVipInfo } from '@/apis/user';
import { calculateAge, router, toast } from "@/utils/tools";
import { apiComfirmOrder, wxPayMiniAppPay } from '@/apis/order';
import { useUserStore } from "@/stores/user";
const userStore = useUserStore();
let bgColor = ref('#3F3A4E')
let gradeList = ref([]);
const shopVip = ref(0)
const appShop = reactive({
  // 会员id
  shopGradeId: null,
  // 会员名称
  shopGrade: null,
  // 1-开会员 2 升级会员
  type: 1,
})
const shoppingId = ref()
const num = ref()
const price = ref()
const radioCustomStyle = { "align-items": "normal" };
const getFGradeList = async () => {
  let res = await apiGradeList();
  gradeList.value = res.data;
}
// 查询个人会员详情信息
const getVipInfoFn = async () => {
  let res = await getVipInfo();
  if (res.data.shopVip === 0) {
    appShop.type = 1
  } else {
    shopVip.value = res.data.shopVip
    appShop.type = 2
  }
}
// 支付接口 start
const comfirmOrder = async () => {
  let params = {
    commodityId: null, //商品ID
    commodityName: null, //商品的标题名称
    actualPayment: null, //支付价格
    userAddressId: null, //发货地址ID
    type: 0, //消费类型  0-开会员  1-开商铺  2-购买商品  3-藏品认证  4-评价费用
    activitiesId: null, //评选活动Id
    appCommodityList: null, // 4评价活动的时候传
    collectionCertificationList: null, // 3藏品认证的时候传
    appShop: appShop
  };
  // let res = await apiComfirmOrder(params);
  // if (res.code == 200) {
  //     shoppingId.value = res.data.shopingId
  //     num.value =res.data.num
  //     price.value =res.data.price
  //     wxPayMiniAppPayFn()
  // }
  await wxPayMiniAppPayFn(params)
}
const wxPayMiniAppPayFn = async (params: any) => {
  let res = await wxPayMiniAppPay(params)
  if (res.code == 200) {
    if (res.code == 200) {
      let dataObj = res.data;
      wx.openEmbeddedMiniProgram({
        appId: dataObj.appId,
        path: dataObj.path,
        envVersion: 'release',//正常跳转路径
        success(res) {
          uni.setStorageSync('isPaySuccess', true)
        }
      })
    }
  }
}
const personalVipOpen = async (item: any) => {
  appShop.shopGradeId = item.id
  appShop.shopGrade = item.name
  if (shopVip.value > item.id) {
    return toast("会员暂不支持降级，如有疑问请联系客服解答");
  }
  comfirmOrder()
}

const leftClick = () => {
  uni.navigateBack()
}
// 查看
const lookNav = (id: any) => {
  uni.navigateTo({
    url: `/pagesMy/member/equity?&id=${id}`
  })
}
const shopVipOpen = () => {
  router(`/pagesMy/store/openStore`);
}
onLoad(() => {
  getFGradeList();
})
onShow(() => {
  getVipInfoFn();
});
</script>

<template>
  <view class="">
    <uv-navbar title="会员等级" @leftClick="leftClick" :bgColor="bgColor" leftIconColor="#fff"
      :titleStyle="{ color: '#fff' }" :fixed="false"></uv-navbar>
    <view class="card-list flex flex-column flex-center">
      <view class="card-box" v-for="item in gradeList" :key="item.id">
        <!-- 会员等级 -->
        <!-- <image v-if="item.type == 0" src="@/static/images/VIP1.png" class="bg-box" /> -->
        <image v-if="item.type == 0" :src="item.images" class="bg-box" />
        <!-- 店铺等级 -->
        <image v-if="item.type == 1" :src="item.images" class="bg-box" @click="shopVipOpen" />

        <view class="text-box">
          <view class="line" v-if="item.type == 0"></view>
          <view class="equity-box flex flex-between" v-if="item.type == 0">
            <view>会员权益</view>
            <view>
              <text class="look-box" @tap="lookNav(item.id)">查看 ></text>
            </view>
          </view>
          <view class="equity-box flex flex-between store-equity" v-if="item.type == 1">
            <view>会员权益</view>
            <view>
              <text class="look-box" @tap="lookNav(item.id)">查看 ></text>
            </view>
          </view>
          <!-- <view>您已是乐石平台尊贵的{{item.name}}用户</view> -->
          <view v-if="item.vip === null">会员开通费用：<text class="price">￥{{ item.price }}</text></view>
          <view v-if="item.vip != null">您已是乐石平台尊贵的{{ item.name }}用户</view>
        </view>

        <view class="state-box present" v-if="item.vip && item.type == 0">当前等级</view>
        <view class="state-box" v-if="!item.vip && item.type == 0">未开通</view>
        <view class="immediately buts-box" v-if="item.type == 0 && item.vip === null" @click="personalVipOpen(item)">
          立即开通</view>
        <!-- <view class="state-box">未开通</view> -->
        <view class="immediately buts-box" v-if="item.type == 1" @click="shopVipOpen">立即开通</view>
        <view class="immediately member-one" v-if="item.type == 0 && item.name == 'VIP1' && !item.vip">立即开通 ></view>
        <view class="immediately member-two" v-if="item.type == 0 && item.name == 'VIP2' && !item.vip">立即开通 ></view>
        <view class="immediately member-three" v-if="item.type == 0 && item.name == 'VIP3' && !item.vip">立即开通 ></view>

      </view>

    </view>
  </view>
</template>

<style lang="scss" scoped>
//
page {
  background: #3f3a4e;
}

.card-list {
  padding-top: 60rpx;
}

.card-box {
  position: relative;
  width: 690rpx;
  height: 382rpx;
  margin-bottom: 40rpx;

  .bg-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .text-box {
    position: absolute;
    top: 50%;
    left: 46rpx;
    color: rgba(124, 141, 167, 1);
    font-size: 28rpx;

    .price {
      color: rgba(243, 96, 78, 1);
    }

    // transform: translateY(-50%);
    .line {
      width: 280rpx;
      height: 4rpx;
      background-color: rgba(124, 141, 167, 1);
    }

    .equity-box {
      width: 280rpx;
      margin: 9.48rpx 0 70rpx;
    }

    .store-equity {
      margin: -54rpx 0 144rpx;
    }

    .look-box {
      color: #878dc6;
    }

    .red-text {
      color: rgba(243, 96, 78, 1);
    }
  }

  .orange-box {
    color: rgba(214, 141, 49, 1);

    .line {
      background-color: rgba(214, 141, 49, 1);
    }

    .look-box {
      color: #d68d31;
    }
  }

  .white-box {
    color: rgba(199, 184, 203, 1);

    .line {
      background-color: rgba(199, 184, 203, 1);
    }

    .look-box {
      color: #fff;
    }
  }

  .state-box {
    position: absolute;
    top: 10rpx;
    left: 32rpx;
    color: rgba(255, 255, 255, 1);
    font-size: 32rpx;
  }

  .immediately {
    position: absolute;
    bottom: 44.92rpx;
    right: 56rpx;
    color: rgba(255, 255, 255, 1);
    font-size: 32rpx;
  }

  .member-one {
    color: rgba(124, 141, 167, 1);
    font-size: 28rpx;
  }

  .member-two {
    color: rgba(214, 141, 49, 1);
    font-size: 28rpx;
  }

  .member-three {
    color: rgba(199, 184, 203, 1);
    font-size: 28rpx;
  }

  .buts-box {
    padding: 14rpx 30rpx;
    background: linear-gradient(to left, rgb(192, 160, 108), rgb(247, 210, 175));
    border-radius: 40rpx;
  }

  .present {
    left: 18rpx;
  }
}
</style>
